<script setup>
import {computed, onMounted, ref, watch} from 'vue';
import {ElMessage} from "element-plus";
import {updateUserPasswordService, getUserProfileService, updateUserProfileService} from "@/api/user.js";
import router from "@/router/index.js";

// 定义当前激活的 tab
const activeTab = ref('basicInfo');

// 技能列表
const skillsOptions = [
  {label: 'Python', value: 'python'},
  {label: 'Ruby', value: 'ruby'},
  {label: 'JavaScript', value: 'javascript'},
  {label: 'CSS', value: 'css'},
  {label: 'Java', value: 'java'},
  {label: 'C', value: 'c'},
  {label: 'PHP', value: 'php'},
  {label: 'C#', value: 'c#'},
  {label: 'C++', value: 'c++'},
  {label: 'Go', value: 'go'},
  {label: 'R', value: 'r'},
  {label: 'Matlab', value: 'matlab'},
  {label: 'SQL', value: 'sql'},
  {label: 'Rust', value: 'rust'},
  {label: 'XML', value: 'xml'},
  {label: 'Shell', value: 'shell'},
  {label: 'Erlang', value: 'erlang'},
  {label: 'FORTRAN', value: 'fortran'},
  {label: 'HTML', value: 'html'},
  {label: 'NodeJS', value: 'nodejs'},
  {label: 'TypeScript', value: 'typescript'},
  {label: 'Android', value: 'android'},
  {label: 'Kotlin', value: 'kotlin'},
  {label: 'Vim', value: 'vim'},
  {label: 'PowerShell', value: 'powershell'},
  {label: 'Docker', value: 'docker'},
  {label: '汇编', value: '汇编'},
  {label: '易语言', value: '易语言'}
];

// 省份列表
const provinceOptions = [
  {label: '北京市', value: 'beijing'},
  {label: '上海市', value: 'shanghai'},
  {label: '天津市', value: 'tianjin'},
  {label: '重庆市', value: 'chongqing'},
  {label: '河北省', value: 'hebei'},
  {label: '山西省', value: 'shanxi'},
  {label: '辽宁省', value: 'liaoning'},
  {label: '吉林省', value: 'jilin'},
  {label: '黑龙江省', value: 'heilongjiang'},
  {label: '江苏省', value: 'jiangsu'},
  {label: '浙江省', value: 'zhejiang'},
  {label: '安徽省', value: 'anhui'},
  {label: '福建省', value: 'fujian'},
  {label: '江西省', value: 'jiangxi'},
  {label: '山东省', value: 'shandong'},
  {label: '河南省', value: 'henan'},
  {label: '湖北省', value: 'hubei'},
  {label: '湖南省', value: 'hunan'},
  {label: '广东省', value: 'guangdong'},
  {label: '海南省', value: 'hainan'},
  {label: '四川省', value: 'sichuan'},
  {label: '贵州省', value: 'guizhou'},
  {label: '云南省', value: 'yunnan'},
  {label: '陕西省', value: 'shaanxi'},
  {label: '甘肃省', value: 'gansu'},
  {label: '青海省', value: 'qinghai'},
  {label: '台湾省', value: 'taiwan'},
  {label: '内蒙古自治区', value: 'neimenggu'},
  {label: '广西壮族自治区', value: 'guangxi'},
  {label: '西藏自治区', value: 'xizang'},
  {label: '宁夏回族自治区', value: 'ningxia'},
  {label: '新疆维吾尔自治区', value: 'xinjiang'},
  {label: '香港特别行政区', value: 'xianggang'},
  {label: '澳门特别行政区', value: 'aomen'}
];

// 城市列表
const cityOptions = {
  beijing: [
    {label: '东城区', value: 'dongcheng'},
    {label: '西城区', value: 'xicheng'},
    {label: '朝阳区', value: 'chaoyang'},
    {label: '海淀区', value: 'haidian'},
    {label: '丰台区', value: 'fengtai'},
    {label: '石景山区', value: 'shijingshan'},
    {label: '通州区', value: 'tongzhou'},
    {label: '顺义区', value: 'shunyi'},
    {label: '昌平区', value: 'changping'},
    {label: '大兴区', value: 'daxing'},
    {label: '房山区', value: 'fangshan'},
    {label: '门头沟区', value: 'mentougou'},
    {label: '延庆区', value: 'yanqing'},
    {label: '怀柔区', value: 'huairou'},
    {label: '平谷区', value: 'pinggu'},
    {label: '密云区', value: 'miyun'}
  ],
  shanghai: [
    {label: '昌平区', value: 'changping'},
    {label: '朝阳区', value: 'chaoyang'},
    {label: '大兴区', value: 'daxing'},
    {label: '东城区', value: 'dongcheng'},
    {label: '房山区', value: 'fangshan'},
    {label: '丰台区', value: 'fengtai'},
    {label: '海淀区', value: 'haidian'},
    {label: '怀柔区', value: 'huairou'},
    {label: '门头沟', value: 'mentou'},
    {label: '密云区', value: 'miyun'},
    {label: '平谷区', value: 'pinggu'},
    {label: '石景山区', value: 'shijingshan'},
    {label: '顺义区', value: 'shunyi'},
    {label: '通州区', value: 'tongzhou'},
    {label: '西城区', value: 'xicheng'},
    {label: '延庆区', value: 'yanqing'}
  ],
  tianjin: [
    {label: '和平区', value: 'heping'},
    {label: '河东区', value: 'hedong'},
    {label: '河西区', value: 'hexi'},
    {label: '南开区', value: 'nankai'},
    {label: '河北区', value: 'hebei'},
    {label: '红桥区', value: 'hongqiao'},
    {label: '滨海新区', value: 'binhaixinqu'},
    {label: '东丽区', value: 'dongli'},
    {label: '西青区', value: 'xiqing'},
    {label: '津南区', value: 'jinnan'},
    {label: '北辰区', value: 'beichen'},
    {label: '武清区', value: 'wuqing'},
    {label: '宝坻区', value: 'baodi'},
    {label: '蓟州区', value: 'jizhou'},
    {label: '静海区', value: 'jinghai'},
    {label: '宁河区', value: 'ninghe'}
  ],
  chongqing: [
    {label: '渝中区', value: 'yuzhong'},
    {label: '江北区', value: 'jiangbei'},
    {label: '南岸区', value: 'nanan'},
    {label: '九龙坡区', value: 'jiulongpo'},
    {label: '沙坪坝区', value: 'shapingba'},
    {label: '大渡口区', value: 'dadukou'},
    {label: '北碚区', value: 'beibei'},
    {label: '渝北区', value: 'yubei'},
    {label: '巴南区', value: 'banan'},
    {label: '万州区', value: 'wanzhou'},
    {label: '涪陵区', value: 'fuling'},
    {label: '黔江区', value: 'qianjiang'},
    {label: '长寿区', value: 'changshou'},
    {label: '江津区', value: 'jiangjin'},
    {label: '合川区', value: 'hechuan'},
    {label: '永川区', value: 'yongchuan'},
    {label: '南川区', value: 'nanchuan'},
    {label: '綦江区', value: 'qijiang'},
    {label: '大足区', value: 'dazu'},
    {label: '璧山区', value: 'bishan'},
    {label: '铜梁区', value: 'tongliang'},
    {label: '潼南区', value: 'tongnan'},
    {label: '荣昌区', value: 'rongchang'},
    {label: '开州区', value: 'kaizhou'},
    {label: '梁平区', value: 'liangping'},
    {label: '武隆区', value: 'wulong'},
    {label: '城口县', value: 'chengkou'},
    {label: '丰都县', value: 'fengdu'},
    {label: '垫江县', value: 'dianjiang'},
    {label: '忠县', value: 'zhongxian'},
    {label: '云阳县', value: 'yunyang'},
    {label: '奉节县', value: 'fengjie'},
    {label: '巫山县', value: 'wushan'},
    {label: '巫溪县', value: 'wuxi'},
    {label: '石柱土家族自治县', value: 'shizhu'},
    {label: '秀山土家族苗族自治县', value: 'xiushan'},
    {label: '酉阳土家族苗族自治县', value: 'youyang'},
    {label: '彭水苗族土家族自治县', value: 'pengshui'}
  ],
  hebei: [
    {label: '石家庄市', value: 'shijiazhuang'},
    {label: '唐山市', value: 'tangshan'},
    {label: '邯郸市', value: 'handan'},
    {label: '邢台市', value: 'xingtai'},
    {label: '保定市', value: 'baoding'},
    {label: '张家口市', value: 'zhangjiakou'},
    {label: '承德市', value: 'chengde'},
    {label: '廊坊市', value: 'langfang'},
    {label: '沧州市', value: 'cangzhou'},
    {label: '衡水市', value: 'hengshui'},
    {label: '秦皇岛市', value: 'qinhuangdao'}
  ],
  shanxi: [
    {label: '太原市', value: 'taiyuan'},
    {label: '大同市', value: 'datong'},
    {label: '阳泉市', value: 'yangquan'},
    {label: '长治市', value: 'changzhi'},
    {label: '晋城市', value: 'jincheng'},
    {label: '朔州市', value: 'shuozhou'},
    {label: '晋中市', value: 'jinzhong'},
    {label: '运城市', value: 'yuncheng'},
    {label: '忻州市', value: 'xinzhou'},
    {label: '临汾市', value: 'linfen'},
    {label: '吕梁市', value: 'lüliang'}
  ],
  liaoning: [
    {label: '沈阳市', value: 'shenyang'},
    {label: '大连市', value: 'dalian'},
    {label: '鞍山市', value: 'anshan'},
    {label: '抚顺市', value: 'fushun'},
    {label: '本溪市', value: 'benxi'},
    {label: '丹东市', value: 'dandong'},
    {label: '锦州市', value: 'jinzhou'},
    {label: '营口市', value: 'yingkou'},
    {label: '阜新市', value: 'fuxin'},
    {label: '辽阳市', value: 'liaoyang'},
    {label: '盘锦市', value: 'panjin'},
    {label: '铁岭市', value: 'tieling'},
    {label: '朝阳市', value: 'chaoyang'},
    {label: '葫芦岛市', value: 'huludao'}
  ],
  jilin: [
    {label: '长春市', value: 'changchun'},
    {label: '吉林市', value: 'jilin'},
    {label: '四平市', value: 'siping'},
    {label: '辽源市', value: 'liaoyuan'},
    {label: '通化市', value: 'tonghua'},
    {label: '白山市', value: 'baishan'},
    {label: '松原市', value: 'songyuan'},
    {label: '白城市', value: 'baicheng'},
    {label: '延边朝鲜族自治州', value: 'yanbian'}
  ],
  heilongjiang: [
    {label: '哈尔滨市', value: 'haerbin'},
    {label: '齐齐哈尔市', value: 'qiqihaer'},
    {label: '牡丹江市', value: 'mudanjiang'},
    {label: '佳木斯市', value: 'jiamusi'},
    {label: '大庆市', value: 'daqing'},
    {label: '鸡西市', value: 'jixi'},
    {label: '鹤岗市', value: 'hegang'},
    {label: '双鸭山市', value: 'shuangyashan'},
    {label: '伊春市', value: 'yichun'},
    {label: '七台河市', value: 'qitaihe'},
    {label: '黑河市', value: 'heihe'},
    {label: '绥化市', value: 'suihua'},
    {label: '大兴安岭地区', value: 'daxinganling'}
  ],
  jiangsu: [
    {label: '南京市', value: 'nanjing'},
    {label: '苏州市', value: 'suzhou'},
    {label: '无锡市', value: 'wuxi'},
    {label: '常州市', value: 'changzhou'},
    {label: '南通市', value: 'nantong'},
    {label: '连云港市', value: 'lianyungang'},
    {label: '淮安市', value: 'huaian'},
    {label: '盐城市', value: 'yancheng'},
    {label: '扬州市', value: 'yangzhou'},
    {label: '镇江市', value: 'zhenjiang'},
    {label: '宿迁市', value: 'suqian'},
    {label: '徐州市', value: 'xuzhou'},
    {label: '泰州市', value: 'taizhou'}
  ],
  zhejiang: [
    {label: '杭州市', value: 'hangzhou'},
    {label: '宁波市', value: 'ningbo'},
    {label: '温州市', value: 'wenzhou'},
    {label: '嘉兴市', value: 'jiaxing'},
    {label: '湖州市', value: 'huzhou'},
    {label: '绍兴市', value: 'shaoxing'},
    {label: '金华市', value: 'jinhua'},
    {label: '衢州市', value: 'quzhou'},
    {label: '舟山市', value: 'zhoushan'},
    {label: '台州市', value: 'taizhou'},
    {label: '丽水市', value: 'lishui'}
  ],
  anhui: [
    {label: '合肥市', value: 'hefei'},
    {label: '芜湖市', value: 'wuhu'},
    {label: '蚌埠市', value: 'bengbu'},
    {label: '淮南市', value: 'huainan'},
    {label: '马鞍山市', value: 'maanshan'},
    {label: '淮北市', value: 'huaibei'},
    {label: '铜陵市', value: 'tongling'},
    {label: '安庆市', value: 'anqing'},
    {label: '黄山市', value: 'huangshan'},
    {label: '滁州市', value: 'chuzhou'},
    {label: '阜阳市', value: 'fuyang'},
    {label: '宿州市', value: 'suzhou'},
    {label: '六安市', value: 'liuan'},
    {label: '亳州市', value: 'bozhou'},
    {label: '池州市', value: 'chizhou'},
    {label: '宣城市', value: 'xuancheng'}
  ],
  fujian: [
    {label: '福州市', value: 'fuzhou'},
    {label: '厦门市', value: 'xiamen'},
    {label: '泉州市', value: 'quanzhou'},
    {label: '漳州市', value: 'zhangzhou'},
    {label: '龙岩市', value: 'longyan'},
    {label: '南平市', value: 'nanping'},
    {label: '三明市', value: 'sanming'},
    {label: '宁德市', value: 'ningde'},
    {label: '莆田市', value: 'putian'}
  ],
  jiangxi: [
    {label: '南昌市', value: 'nanchang'},
    {label: '景德镇市', value: 'jingdezhen'},
    {label: '赣州市', value: 'ganzhou'},
    {label: '九江市', value: 'jiujiang'},
    {label: '上饶市', value: 'shangrao'},
    {label: '抚州市', value: 'fuzhou'},
    {label: '宜春市', value: 'yichun'},
    {label: '吉安市', value: 'jian'},
    {label: '萍乡市', value: 'pingxiang'},
    {label: '新余市', value: 'xinyu'},
    {label: '鹰潭市', value: 'yingtan'}
  ],
  shandong: [
    {label: '济南市', value: 'jinan'},
    {label: '青岛市', value: 'qingdao'},
    {label: '烟台市', value: 'yantai'},
    {label: '淄博市', value: 'zibo'},
    {label: '枣庄市', value: 'zaozhuang'},
    {label: '东营市', value: 'dongying'},
    {label: '潍坊市', value: 'weifang'},
    {label: '济宁市', value: 'jining'},
    {label: '泰安市', value: 'taian'},
    {label: '威海市', value: 'weihai'},
    {label: '日照市', value: 'rizhao'},
    {label: '临沂市', value: 'linyi'},
    {label: '德州市', value: 'dezhou'},
    {label: '聊城市', value: 'liaocheng'},
    {label: '滨州市', value: 'binzhou'},
    {label: '菏泽市', value: 'heze'},
    {label: '莱芜市', value: 'laiwu'}
  ],
  henan: [
    {label: '郑州市', value: 'zhengzhou'},
    {label: '开封市', value: 'kaifeng'},
    {label: '洛阳市', value: 'luoyang'},
    {label: '平顶山市', value: 'pingdingshan'},
    {label: '安阳市', value: 'anyang'},
    {label: '济源市', value: 'jiyuan'},
    {label: '鹤壁市', value: 'hebi'},
    {label: '新乡市', value: 'xinxiang'},
    {label: '焦作市', value: 'jiaozuo'},
    {label: '濮阳市', value: 'puyang'},
    {label: '许昌市', value: 'xuchang'},
    {label: '漯河市', value: 'luohe'},
    {label: '三门峡市', value: 'sanmenxia'},
    {label: '商丘市', value: 'shangqiu'},
    {label: '周口市', value: 'zhoukou'},
    {label: '驻马店市', value: 'zhumadian'},
    {label: '南阳市', value: 'nanyang'},
    {label: '信阳市', value: 'xinyang'}
  ],
  hubei: [
    {label: '武汉市', value: 'wuhan'},
    {label: '黄石市', value: 'huangshi'},
    {label: '十堰市', value: 'shiyan'},
    {label: '宜昌市', value: 'yichang'},
    {label: '襄阳市', value: 'xiangyang'},
    {label: '鄂州市', value: 'ezhou'},
    {label: '荆门市', value: 'jingmen'},
    {label: '孝感市', value: 'xiaogan'},
    {label: '荆州市', value: 'jingzhou'},
    {label: '黄冈市', value: 'huanggang'},
    {label: '咸宁市', value: 'xianning'},
    {label: '随州市', value: 'suizhou'},
    {label: '恩施土家族苗族自治州', value: 'enshi'},
    {label: '仙桃市', value: 'xiantao'},
    {label: '潜江市', value: 'qianjiang'},
    {label: '天门市', value: 'tianmen'},
    {label: '神农架林区', value: 'shennongjia'}
  ],
  hunan: [
    {label: '长沙市', value: 'changsha'},
    {label: '株洲市', value: 'zhuzhou'},
    {label: '湘潭市', value: 'xiangtan'},
    {label: '衡阳市', value: 'hengyang'},
    {label: '邵阳市', value: 'shaoyang'},
    {label: '岳阳市', value: 'yueyang'},
    {label: '常德市', value: 'changde'},
    {label: '张家界市', value: 'zhangjiajie'},
    {label: '益阳市', value: 'yiyang'},
    {label: '郴州市', value: 'chenzhou'},
    {label: '永州市', value: 'yongzhou'},
    {label: '怀化市', value: 'huaihua'},
    {label: '娄底市', value: 'loudi'},
    {label: '湘西土家族苗族自治州', value: 'xiangxi'}
  ],
  guangdong: [
    {label: '广州市', value: 'guangzhou'},
    {label: '深圳市', value: 'shenzhen'},
    {label: '珠海市', value: 'zhuhai'},
    {label: '汕头市', value: 'shantou'},
    {label: '佛山市', value: 'foshan'},
    {label: '韶关市', value: 'shaoguan'},
    {label: '湛江市', value: 'zhanjiang'},
    {label: '肇庆市', value: 'zhaoqing'},
    {label: '江门市', value: 'jiangmen'},
    {label: '茂名市', value: 'maoming'},
    {label: '惠州市', value: 'huizhou'},
    {label: '梅州市', value: 'meizhou'},
    {label: '汕尾市', value: 'shanwei'},
    {label: '河源市', value: 'heyuan'},
    {label: '阳江市', value: 'yangjiang'},
    {label: '清远市', value: 'qingyuan'},
    {label: '东莞市', value: 'dongguan'},
    {label: '中山市', value: 'zhongshan'},
    {label: '潮州市', value: 'chaozhou'},
    {label: '揭阳市', value: 'jieyang'},
    {label: '云浮市', value: 'yunfu'}
  ],
  hainan: [
    {label: '海口市', value: 'haikou'},
    {label: '三亚市', value: 'sanya'},
    {label: '儋州市', value: 'danzhou'},
    {label: '三沙市', value: 'sansha'},
    {label: '五指山市', value: 'wuzhishan'},
    {label: '琼海市', value: 'qionghai'},
    {label: '文昌市', value: 'wenchang'},
    {label: '万宁市', value: 'wnanning'},
    {label: '东方市', value: 'dongfang'},
    {label: '定安县', value: 'dingan'},
    {label: '屯昌县', value: 'tunchang'},
    {label: '澄迈县', value: 'chengmai'},
    {label: '临高县', value: 'lingao'},
    {label: '琼中黎族苗族自治县', value: 'qiongzhong'},
    {label: '保亭黎族苗族自治县', value: 'baoting'},
    {label: '白沙黎族自治县', value: 'baisha'},
    {label: '昌江黎族自治县', value: 'changjiang'},
    {label: '陵水黎族自治县', value: 'lingshui'},
    {label: '乐东黎族自治县', value: 'ledong'}
  ],
  sichuan: [
    {label: '成都市', value: 'chengdu'},
    {label: '自贡市', value: 'zigong'},
    {label: '攀枝花市', value: 'panzhihua'},
    {label: '泸州市', value: 'luzhou'},
    {label: '德阳市', value: 'deyang'},
    {label: '绵阳市', value: 'mianyang'},
    {label: '广元市', value: 'guangyuan'},
    {label: '遂宁市', value: 'suining'},
    {label: '内江市', value: 'neijiang'},
    {label: '乐山市', value: 'leshan'},
    {label: '南充市', value: 'nanchong'},
    {label: '眉山市', value: 'meishan'},
    {label: '宜宾市', value: 'yibin'},
    {label: '广安市', value: 'guangan'},
    {label: '达州市', value: 'dazhou'},
    {label: '雅安市', value: 'yaan'},
    {label: '巴中市', value: 'bazhong'},
    {label: '资阳市', value: 'ziyang'},
    {label: '阿坝藏族羌族自治州', value: 'aba'},
    {label: '甘孜藏族自治州', value: 'ganzi'},
    {label: '凉山彝族自治州', value: 'liangshan'}
  ],
  guizhou: [
    {label: '贵阳市', value: 'guiyang'},
    {label: '六盘水市', value: 'liupanshui'},
    {label: '遵义市', value: 'zunyi'},
    {label: '安顺市', value: 'anshun'},
    {label: '毕节市', value: 'bijie'},
    {label: '铜仁市', value: 'tongren'},
    {label: '黔西南布依族苗族自治州', value: 'qianxinan'},
    {label: '黔东南苗族侗族自治州', value: 'qiandongnan'},
    {label: '黔南布依族苗族自治州', value: 'qiannan'}
  ],
  yunnan: [
    {label: '昆明市', value: 'kunming'},
    {label: '曲靖市', value: 'qujing'},
    {label: '玉溪市', value: 'yuxi'},
    {label: '保山市', value: 'baoshan'},
    {label: '昭通市', value: 'zhaotong'},
    {label: '丽江市', value: 'lijiang'},
    {label: '普洱市', value: 'puer'},
    {label: '临沧市', value: 'lincang'},
    {label: '楚雄彝族自治州', value: 'chuxiong'},
    {label: '红河哈尼族彝族自治州', value: 'honghe'},
    {label: '文山壮族苗族自治州', value: 'wenshan'},
    {label: '西双版纳傣族自治州', value: 'xishuangbanna'},
    {label: '德宏傣族景颇族自治州', value: 'dehong'},
    {label: '怒江傈僳族自治州', value: 'nujiang'},
    {label: '迪庆藏族自治州', value: 'diqing'},
    {label: '大理白族自治州', value: 'dali'},
  ],
  shaanxi: [
    {label: '西安市', value: 'xian'},
    {label: '宝鸡市', value: 'baoji'},
    {label: '咸阳市', value: 'xianyang'},
    {label: '渭南市', value: 'weinan'},
    {label: '汉中市', value: 'hanzhong'},
    {label: '安康市', value: 'ankang'},
    {label: '商洛市', value: 'shangluo'},
    {label: '榆林市', value: 'yulin'},
    {label: '延安市', value: 'yanan'},
    {label: '铜川市', value: 'tongchuan'}
  ],
  gansu: [
    {label: '兰州市', value: 'lanzhou'},
    {label: '嘉峪关市', value: 'jiayuguan'},
    {label: '金昌市', value: 'jinchang'},
    {label: '白银市', value: 'baiyin'},
    {label: '天水市', value: 'tianshui'},
    {label: '武威市', value: 'wuwei'},
    {label: '张掖市', value: 'zhangye'},
    {label: '平凉市', value: 'pingliang'},
    {label: '酒泉市', value: 'jiuquan'},
    {label: '庆阳市', value: 'qingyang'},
    {label: '定西市', value: 'dingxi'},
    {label: '陇南市', value: 'longnan'},
    {label: '临夏回族自治州', value: 'linxia'},
    {label: '甘南藏族自治州', value: 'gannan'}
  ],
  qinghai: [
    {label: '西宁市', value: 'xining'},
    {label: '海东市', value: 'haidong'},
    {label: '海北藏族自治州', value: 'haibei'},
    {label: '黄南藏族自治州', value: 'huangnan'},
    {label: '海南藏族自治州', value: 'hainan'},
    {label: '果洛藏族自治州', value: 'guoluo'},
    {label: '玉树藏族自治州', value: 'yushu'},
    {label: '海西蒙古族藏族自治州', value: 'haixi'}
  ],
  taiwan: [
    {label: '台北市', value: 'taibei'},
    {label: '新北市', value: 'xinbei'},
    {label: '桃园市', value: 'taoyuan'},
    {label: '台中市', value: 'taizhong'},
    {label: '台南市', value: 'tainan'},
    {label: '高雄市', value: 'gaosheng'},
    {label: '基隆市', value: 'jilong'},
    {label: '新竹市', value: 'xinchu'},
    {label: '嘉义市', value: 'jiayi'},
    {label: '新竹县', value: 'xinchuxian'},
    {label: '苗栗县', value: 'miaoli'},
    {label: '彰化县', value: 'zhanghua'},
    {label: '南投县', value: 'nantou'},
    {label: '云林县', value: 'yunlin'},
    {label: '嘉义县', value: 'jiayixian'},
    {label: '屏东县', value: 'pingdong'},
    {label: '宜兰县', value: 'yilan'},
    {label: '花莲县', value: 'hualien'},
    {label: '台东县', value: 'taitung'},
    {label: '澎湖县', value: 'penghu'}
  ],
  neimenggu: [
    {label: '呼和浩特市', value: 'huhehaote'},
    {label: '包头市', value: 'baotou'},
    {label: '乌海市', value: 'wuhai'},
    {label: '赤峰市', value: 'chifeng'},
    {label: '通辽市', value: 'tongliao'},
    {label: '鄂尔多斯市', value: 'eerduosi'},
    {label: '呼伦贝尔市', value: 'hulunbeier'},
    {label: '巴彦淖尔市', value: 'bayannaoer'},
    {label: '乌兰察布市', value: 'wulanchabu'},
    {label: '兴安盟', value: 'xinganmeng'},
    {label: '阿拉善盟', value: 'alashanmeng'},
    {label: '锡林郭勒盟', value: 'xilinguolemeng'}
  ],
  guangxi: [
    {label: '南宁市', value: 'nanning'},
    {label: '柳州市', value: 'liuzhou'},
    {label: '桂林市', value: 'guilin'},
    {label: '梧州市', value: 'wuzhou'},
    {label: '北海市', value: 'beihai'},
    {label: '崇左市', value: 'chongzuo'},
    {label: '来宾市', value: 'laibin'},
    {label: '贺州市', value: 'hezhou'},
    {label: '玉林市', value: 'yulin'},
    {label: '百色市', value: 'baise'},
    {label: '河池市', value: 'hechi'},
    {label: '钦州市', value: 'qinzhou'},
    {label: '防城港市', value: 'fangchenggang'},
    {label: '贵港市', value: 'guigang'}
  ],
  xizang: [
    {label: '拉萨市', value: 'lasa'},
    {label: '日喀则市', value: 'rikaze'},
    {label: '山南市', value: 'shannan'},
    {label: '林芝市', value: 'linzhi'},
    {label: '昌都市', value: 'changdu'},
    {label: '那曲市', value: 'naqu'},
    {label: '阿里地区', value: 'ali'}
  ],
  ningxia: [
    {label: '银川市', value: 'yinchuan'},
    {label: '石嘴山市', value: 'shizuishan'},
    {label: '吴忠市', value: 'wuzhong'},
    {label: '固原市', value: 'guyuan'},
    {label: '中卫市', value: 'zhongwei'}
  ],
  xinjiang: [
    {label: '乌鲁木齐市', value: 'wulumuqi'},
    {label: '克拉玛依市', value: 'kelamayi'},
    {label: '吐鲁番市', value: 'tulufan'},
    {label: '哈密市', value: 'hami'},
    {label: '和田地区', value: 'hetian'},
    {label: '阿克苏地区', value: 'akesu'},
    {label: '喀什地区', value: 'kashi'},
    {label: '塔城地区', value: 'tacheng'},
    {label: '阿勒泰地区', value: 'aletai'},
    {label: '克孜勒苏柯尔克孜自治州', value: 'kezilesu'},
    {label: '巴音郭楞蒙古自治州', value: 'bayinguoleng'},
    {label: '昌吉回族自治州', value: 'changji'},
    {label: '博尔塔拉蒙古自治州', value: 'boertala'},
    {label: '伊犁哈萨克自治州', value: 'yili'},
    {label: '奎屯市', value: 'kuitun'},
    {label: '石河子市', value: 'shihezi'},
    {label: '阿拉尔市', value: 'alier'},
    {label: '图木舒克市', value: 'tumushuke'},
    {label: '五家渠市', value: 'wujaquan'}
  ],
  aomen: [
    {label: '澳门半岛', value: 'aomenbandao'},
    {label: '澳门外岛', value: 'aomenwaidao'}
  ]
};

// 用户信息
const form = ref({
  name: '',
  specialSkills: [],
  gender: 2,
  company: '',
  jobTitle: '',
  qq: '',
  wechat: '',
  blog: '',
  introduction: '',
  province: '',
  city: ''
});

// 用户
const userData = localStorage.getItem('user');

const user = userData ? JSON.parse(userData) : {}

if (user && user.name) {
  form.value.name = user.name;
}

// 动态计算城市选项
const filteredCityOptions = computed(() => {
  return cityOptions[form.value.province] || [];
});

// 监听省份变化
watch(() => form.value.province, () => {
  form.value.city = '';
  formRef.value.validateField('city');
});

// 获取用户信息
onMounted(async () => {
  const res = await getUserProfileService(user.id);
  if (res.data.code === '200') {
    form.value.name = res.data.data.name;
    form.value.specialSkills = res.data.data.specialSkills;
    form.value.gender = res.data.data.gender;
    form.value.company = res.data.data.company;
    form.value.jobTitle = res.data.data.jobTitle;
    form.value.qq = res.data.data.qq;
    form.value.wechat = res.data.data.wechat;
    form.value.blog = res.data.data.blog;
    form.value.introduction = res.data.data.introduction;
    form.value.province = res.data.data.province;
    form.value.city = res.data.data.city;
  }
})

const emit = defineEmits(['updateUserProfile'])

// const basicRef = ref()

// 修改用户信息
const handleSaveUserProfile = async () => {
  // const valid = await basicRef.value.validate(); // 触发表单校验
  try {

    let parms = {
      userId: user.id,
      name: form.value.name,
      specialSkills: form.value.specialSkills,
      gender: form.value.gender,
      company: form.value.company,
      jobTitle: form.value.jobTitle,
      qq: form.value.qq,
      wechat: form.value.wechat,
      blog: form.value.blog,
      introduction: form.value.introduction,
      province: form.value.province,
      city: form.value.city
    };
    const res = await updateUserProfileService(parms);
    if (res.data.code === '200') {
      ElMessage.success('保存成功');
      const storedUser = JSON.parse(localStorage.getItem('user'));
      storedUser.name = form.value.name;
      localStorage.setItem('user', JSON.stringify(storedUser));
      emit('updateUserProfile', {name: form.value.name});
    } else {
      ElMessage.error(res.data.message);
    }
  } catch (error) {
    ElMessage.error("请输入用户信息");
  }
};


const passwordForm = ref({
  id: user?.id || '',
  password: '',
  newPassword: '',
  confirmPassword: ''
})

const rules = {
  password: [
    {required: true, message: '请输入原密码', trigger: 'blur'},
    {min: 8, max: 16, message: '密码长度应在 8 ~ 16 位之间', trigger: 'blur'}
  ],
  newPassword: [
    {required: true, message: '请输入新密码', trigger: 'blur'},
    {min: 8, max: 16, message: '密码长度应在 8 ~ 16 位之间', trigger: 'blur'}
  ],
  confirmPassword: [
    {required: true, message: '请输入确认密码', trigger: 'blur'},
    {min: 8, max: 16, message: '密码长度应在 8 ~ 16 位之间', trigger: 'blur'},
    {
      validator: (rule, value, callback) => {
        if (value !== passwordForm.value.newPassword) {
          callback(new Error('两次输入的密码不一致'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ]
}

const formRef = ref();

// 修改用户密码
const handleSaveUserPassword = async () => {
  const valid = await formRef.value.validate()
  if (valid) {
    const res = await updateUserPasswordService(passwordForm.value)
    if (res.data.code === '200') {
      ElMessage.success('修改成功，请重新登录')
      localStorage.clear()
      void router.push('/login')
    } else {
      ElMessage.error(res.data.message || '修改失败')
    }
  } else {
    ElMessage.error("请填写完整信息")
  }
};


// const basicInfoRules = {
//   name: [
//     {required: true, message: '请输入姓名', trigger: 'blur'},
//     {min: 2, max: 20, message: '姓名长度应在 2 ~ 20 位之间', trigger: 'blur'}
//   ],
//   specialSkills: [
//     {required: true, message: '请选择至少一项特长', trigger: 'change'},
//     {
//       validator: (rule, value, callback) => {
//         if (value.length > 5) {
//           callback(new Error('最多只能选择 5 个特长'));
//         } else {
//           callback();
//         }
//       }, trigger: 'change'
//     }
//   ],
//   gender: [
//     {required: true, message: '请选择性别', trigger: 'blur'}
//   ],
//   company: [
//     {required: true, message: '请输入公司名称', trigger: 'blur'},
//     {max: 50, message: '公司名称不能超过 50 个字符', trigger: 'blur'}
//   ],
//   jobTitle: [
//     {required: true, message: '请输入职务', trigger: 'blur'},
//     {max: 50, message: '职务不能超过 50 个字符', trigger: 'blur'}
//   ],
//   qq: [
//     {required: true, message: '请输入QQ号码', trigger: 'blur'},
//     {pattern: /^[1-9][0-9]{4,10}$/, message: '请输入正确的QQ号码', trigger: 'blur'}
//   ],
//   wechat: [
//     {required: true, message: '请输入微信号', trigger: 'blur'},
//     {pattern: /^[a-zA-Z][a-zA-Z0-9_-]{5,19}$/, message: '请输入正确的微信号', trigger: 'blur'}
//   ],
//   blog: [
//     {required: true, message: '请输入博客地址', trigger: 'blur'},
//     {
//       pattern: /^(https?:\/\/)?([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}(\/\S*)?$/,
//       message: '请输入有效的博客地址',
//       trigger: 'blur'
//     }
//   ],
//   province: [
//     {required: true, message: '请选择省份', trigger: 'change'}
//   ],
//   city: [
//     {required: true, message: '请选择城市', trigger: 'change'}
//   ],
//   introduction: [
//     {max: 200, message: '简介内容不能超过 200 个字符', trigger: 'blur'}
//   ]
// };


</script>

<template>
  <div class="profile-container">
    <el-tabs v-model="activeTab">
      <el-tab-pane label="基本信息" name="basicInfo">
        <el-form :model="form" :rules="basicInfoRules" ref="basicRef" label-width="60px">
          <el-form-item prop="name" label="姓名">
            <el-input v-model="form.name" style="height: 40px;margin-top: 20px;" placeholder="姓名"></el-input>
          </el-form-item>
          <el-form-item prop="specialSkills" label="特长">
            <el-select ref="skillSelectRef" v-model="form.specialSkills"
                       filterable
                       multiple
                       :multiple-limit="5"
                       placeholder="请选择您擅长的编程语言 (最多可选择 5 个语言)"
            >
              <el-option
                  v-for="skill in skillsOptions"
                  :key="skill.value"
                  :label="skill.label"
                  :value="skill.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="gender" label="性别">
            <el-radio style="margin-top: 25px" v-model="form.gender" :label="1">男</el-radio>
            <el-radio style="margin-top: 25px" v-model="form.gender" :label="0">女</el-radio>
          </el-form-item>
          <el-form-item prop="company" label="公司">
            <el-input v-model="form.company" class="el-form-item-input" placeholder="公司地址"></el-input>
          </el-form-item>
          <el-form-item prop="jobTitle" label="职务">
            <el-input v-model="form.jobTitle" class="el-form-item-input" placeholder="职务"></el-input>
          </el-form-item>
          <el-form-item prop="qq" label="QQ">
            <el-input v-model="form.qq" class="el-form-item-input" placeholder="QQ"></el-input>
          </el-form-item>
          <el-form-item prop="wechat" label="微信">
            <el-input v-model="form.wechat" class="el-form-item-input" placeholder="微信"></el-input>
          </el-form-item>
          <el-form-item prop="blog" label="博客">
            <el-input v-model="form.blog" class="el-form-item-input" placeholder="博客地址"></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <!-- 省份 -->
            <el-select style="width: 232px; margin-right: 20px" filterable v-model="form.province" placeholder="省份">
              <el-option
                  v-for="province in provinceOptions"
                  :key="province.value"
                  :label="province.label"
                  :value="province.value"
              />
            </el-select>

            <!-- 城市 -->
            <el-select style="width: 232px" filterable v-model="form.city" placeholder="城市">
              <el-option
                  v-for="city in filteredCityOptions"
                  :key="city.value"
                  :label="city.label"
                  :value="city.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="address" label="简介">
            <el-input
                v-model="form.introduction"
                :rows="8"
                style="height: 200px; margin-top: 20px"
                type="textarea"
            />
          </el-form-item>
          <el-form-item>
            <div style="width: 50%; display: flex; justify-content: flex-end;">
              <el-button type="primary" style="width: 100px; font-size: 16px" @click="handleSaveUserProfile">保 存
              </el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="修改密码" name="changePassword">
        <el-form :model="passwordForm" :rules="rules" ref="formRef" label-width="90px">
          <el-form-item label="原密码" prop="password">
            <el-input v-model="passwordForm.password" type="password" show-password placeholder="原密码"
                      class="el-form-item-input"/>
          </el-form-item>

          <el-form-item label="新密码" prop="newPassword">
            <el-input v-model="passwordForm.newPassword" type="password" show-password placeholder="新密码"
                      class="el-form-item-input"/>
          </el-form-item>

          <el-form-item label="确认密码" prop="confirmPassword">
            <el-input v-model="passwordForm.confirmPassword" type="password" show-password placeholder="确认密码"
                      class="el-form-item-input"/>
          </el-form-item>

          <div style="width: 540px;display: flex; justify-content: center;">
            <el-button type="primary" style="width: 100px; font-size: 16px; margin-top: 20px"
                       @click="handleSaveUserPassword">保 存
            </el-button>
          </div>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>


<style scoped lang="scss">
:deep() .el-tooltip__trigger {
  height: 40px;
  margin-top: 20px;
}

:deep() .el-form-item__label {
  margin-top: 20px;
  line-height: 40px;
  font-size: 16px;
  color: #4c4c4c;
}

.el-form-item-input {
  height: 40px;
  width: 40%;
  margin-top: 20px;
}

.el-tabs__item.is-active {
  color: #409EFF; // 激活标签颜色
}

.el-tabs__active-bar {
  background-color: #409EFF; // 激活下划线颜色
}
</style>
